<template>
  <div class="home">
    <nav-bar></nav-bar>

    <van-tabs
      v-model="active"
      swipeable
      sticky
      line-width="11.111vw"
      style="position: relative"
    >
      <span class="icon" @click="iconClick"
        ><van-icon name="setting"></van-icon
      ></span>

      <van-tab
        v-for="item in category"
        :title="item.title"
        :key="item.id"
        title-style="font-size:3.889vw;"
      >
        <van-list
          v-model="item.isLoading"
          :immediate-check="false"
          :finished="item.isFinished"
          finished-text="我也是有底线的"
          offset="20"
          @load="onLoad"
        >
          <div class="detail_box" style="padding-top: 10px">
            <detail
              class="detail_item"
              v-for="(categoryItem, categoryIndex) in item.list"
              :key="categoryIndex"
              :detailItem="categoryItem"
            ></detail>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import NavBar from "../components/common/NavBar.vue";
import { selectCategory, getList } from "@/utils/Api.js";
import Detail from "../components/common/Detail.vue";
export default {
  components: {
    NavBar,
    Detail,
  },
  data() {
    return {
      active: 0,
      category: {},
    };
  },

  created() {
    this.selectCategory();
  },

  watch: {
    active(newValue, oldValue) {
      this.selectArtilce();
    },
  },
  activated() {
    console.log(11);
    this.selectCategory();
  },
  methods: {
    getCategoryActive() {
      const category = this.category[this.active];
      // console.log(category);
      return category;
    },
    async selectCategory() {
      if (JSON.parse(localStorage.getItem("category"))) {
        this.setCategory(JSON.parse(localStorage.getItem("category")));
      } else {
        const res = await selectCategory();
        this.setCategory(res.data);
      }
    },
    setCategory(category) {
      category.map((item, index) => {
        // console.log(item);
        item.list = [];
        item.page = 0;
        item.pageSize = 10;
        item.isFinished = false;
        item.isLoading = false;
      });
      // console.log(category);
      this.category = category;
      this.selectArtilce();
    },
    async selectArtilce() {
      const category = this.getCategoryActive();
      // console.log(category);
      const res = await getList(category._id, category.page, category.pageSize);
      category.list.push(...res.data);
      // console.log(res.data.length);
      if (res.data.length < 10) {
        category.isFinished = true;
      }
    },
    onLoad() {
      const categoryItem = this.getCategoryActive();
      setTimeout(() => {
        categoryItem.page += 1;
        this.selectArtilce();

        categoryItem.isLoading = false;
      }, 500);
    },
    iconClick() {
      this.$router.push("CategoryChoose");
    },
  },
};
</script>

<style lang="less" scoped>
.detail_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .detail_item {
    width: 48%;
  }
}
.icon {
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 2;
  font-size: 8.333vw;
  color: #ff9db5;
  background: white;

  height: 44px;
  display: flex;
  align-items: center;
}
</style>
